import { Component } from 'react'
import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtButton, AtInput, AtSwitch } from 'taro-ui'

import * as api from 'src/api'
import CityPicker from 'src/components/CityPicker'
import withPage from 'src/utils/withPage'

import './index.scss'

type IProps = {}

type IState = {
  formValue: {
    realName: string
    phone: string
    address: {
      province: string
      city: string
      district: string
      cityId: number
    }
    detail: string
    isDefault: boolean
  }
}

interface Index {
  props: IProps
  state: IState
  id: string
}

@withPage()
class Index extends Component {
  state: IState = {
    formValue: {
      realName: '',
      phone: '',
      address: {
        province: '',
        city: '',
        district: '',
        cityId: 0,
      },
      detail: '',
      isDefault: false,
    },
  }

  async onLoad(options) {
    if (options.id) {
      Taro.setNavigationBarTitle({
        title: '修改地址',
      })
      this.id = options.id
      this.getUserAddress()
    }
  }

  getUserAddress = async () => {
    const res = await api.getAddressDetail(this.id)
    const formValue = {
      realName: res.realName,
      phone: res.phone,
      address: {
        province: res.province,
        city: res.city,
        district: res.district,
        cityId: res.cityId,
      },
      detail: res.detail,
      isDefault: res.isDefault,
    }
    this.setState({ formValue })
  }

  handleChange = (key, e) => {
    const { formValue } = this.state
    formValue[key] = e
    this.setState({ formValue })
  }

  handleSubmit = async () => {
    const { formValue } = this.state
    if (!formValue.realName) {
      return Taro.showToast({ title: '请填写收货人姓名', icon: 'none' })
    }
    if (!formValue.phone) {
      return Taro.showToast({ title: '请填写联系电话', icon: 'none' })
    }
    if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(formValue.phone)) {
      return Taro.showToast({ title: '请输入正确的手机号码', icon: 'none' })
    }
    if (!formValue.address?.province) {
      return Taro.showToast({ title: '请选择所在地区', icon: 'none' })
    }
    if (!formValue.detail) {
      return Taro.showToast({ title: '请填写详细地址', icon: 'none' })
    }
    Taro.showLoading({
      title: '保存中',
    })
    try {
      await api.editAddress({ ...formValue, id: this.id })
      Taro.hideLoading()
      if (this.id) {
        Taro.showToast({ title: '修改成功', icon: 'success' })
      } else {
        Taro.showToast({ title: '添加成功', icon: 'success' })
      }
      Taro.navigateBack()
    } catch (error) {
      console.log(error)
      Taro.hideLoading()
    }
  }

  handleChecke = (order_id: string) => {
    Taro.navigateTo({
      url: '/pages/order_details/index?order_id=' + order_id,
    })
  }

  render() {
    const { formValue } = this.state
    return (
      <View className="address-add">
        <AtInput
          className="input"
          name="realName"
          type="text"
          title="姓名"
          placeholder="请输入姓名"
          value={formValue.realName}
          onChange={(e) => this.handleChange('realName', e)}
        />
        <AtInput
          className="input rm-border"
          name="phone"
          type="text"
          title="联系电话"
          placeholder="请输入联系电话"
          value={formValue.phone}
          onChange={(e) => this.handleChange('phone', e)}
        />
        <CityPicker
          value={formValue.address}
          onChange={(e) => this.handleChange('address', e)}
        />
        <AtInput
          className="input"
          name="detail"
          type="text"
          title="详细地址"
          placeholder="请输入详细地址"
          value={formValue.detail}
          onChange={(e) => this.handleChange('detail', e)}
        />
        <AtSwitch
          title="设为默认地址"
          checked={formValue.isDefault}
          onChange={(e) => this.handleChange('isDefault', e)}
        />
        <AtButton
          className="submit"
          type="primary"
          circle
          onClick={this.handleSubmit}
        >
          立即保存
        </AtButton>
      </View>
    )
  }
}

export default Index
